<template>
  <div>
    <div class="header">
      <div class="menu">
        <span>
          <el-button @click="send()">
            <el-icon>
              <expand style="width: 1em" />
            </el-icon>
          </el-button>
        </span>
        <div class="avatar">
          <el-dropdown>
            <el-avatar shape="square">tou</el-avatar>chenshunwen<el-icon>
              <caret-bottom />
            </el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <router-link to="/User">
                  <el-dropdown-item>账号信息</el-dropdown-item>
                </router-link>
                <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import { defineEmits, ref } from 'vue';
const active = ref(false)
const emits = defineEmits(['update'])
var send = () => {
  emits('update', !active.value);
  active.value = !active.value;
}
var router = useRouter();
var logout = () => {
  router.push({
    path: 'login'
  })
  ElMessage.warning('退出登录！')
}
</script>

<style scoped>
.avatar {
  margin-top: 0px;
  margin-right: 20px;
  float: right;
}

.menu {
  margin-top: 10px;
  font-size: 30px;
}
</style>